<template>
  <div class="ajax">
    <div class="conf-card">
      <div class="mark">
        <el-button type="primary" class="btn" @click="editConf"
          >编辑配置</el-button
        >
      </div>
      <div class="title">请求配置</div>
      <div class="info">
        <div class="i-item">
          <div class="name">类型</div>
          <div class="value">
            {{
              requestContentTypeArray[
                selectedComponent.request.requestContentType
              ]
            }}
          </div>
        </div>
        <div class="i-item">
          <div class="name">请求方式</div>
          <div class="value">
            {{ selectedComponent.request.requestHttpType }}
          </div>
        </div>
        <div class="i-item">
          <div class="name">组件间隔</div>
          <div class="value time">
            <div>{{ selectedComponent.request.requestInterval || "暂无" }}</div>
            <div class="unit">
              {{ timeUnit[selectedComponent.request.requestIntervalUnit] }}
            </div>
          </div>
        </div>
        <div class="i-item">
          <div class="name">全局间隔</div>
          <div class="value time">
            <div>{{ requestGlobalConfig.requestInterval || "暂无" }}</div>
            <div class="unit">
              {{ timeUnit[requestGlobalConfig.requestIntervalUnit] }}
            </div>
          </div>
        </div>
      </div>
      <div class="url">
        <div class="u-item">
          <div class="name">源地址</div>
          <div class="value" :title="requestGlobalConfig.requestOriginUrl">
            {{ requestGlobalConfig.requestOriginUrl || "暂无" }}
          </div>
        </div>
        <div class="u-item">
          <div class="name">组件地址</div>
          <div class="value" :title="selectedComponent.request.requestUrl">
            {{ selectedComponent.request.requestUrl || "暂无" }}
          </div>
        </div>
      </div>
    </div>
    <div class="test">
      <div class="name">测试</div>
      <el-button class="value" @click="testFetch" :loading="loading"
        >发送请求</el-button
      >
    </div>
    <dataMatch :ajax="true" />
    <requestConfig v-model:ajaxShow="ajaxShow" />
  </div>
</template>
<script setup>
import requestConfig from "./requestUrl/requestConfig.vue";
import dataMatch from "./dataMatch.vue";
import { ref, computed, toRaw } from "vue";
import { useStore } from "vuex";
import {
  timeUnit,
  requestContentTypeArray,
} from "../../../../../../packages/public/publicConfig.js";
import { customizeHttp } from "@/api/http";
import { newFunctionHandle } from "@/utils/index.js";

let store = useStore();
let ajaxShow = ref(false);
let loading = ref(false);

let requestGlobalConfig = computed(() => {
  return store.state.chartEditStore.requestGlobalConfig;
});
let selectedComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent;
});
function editConf() {
  ajaxShow.value = true;
}
async function testFetch() {
  if (!selectedComponent.value?.request) return;
  loading.value = true;
  try {
    const res = await customizeHttp(
      toRaw(selectedComponent.value.request),
      toRaw(requestGlobalConfig.value)
    );
    loading.value = false;
    if (res) {
      const { data } = res;
      if (!data && !selectedComponent.value.filter) {
        ElMessage.warning("您的数据不符合默认格式，请配置过滤器！");
        // showMatching.value = true
        return;
      }
      selectedComponent.value.option.dataset.data = newFunctionHandle(
        data,
        res,
        selectedComponent.value.filter
      );
      ElMessage.success("接口数据返回成功");
      // showMatching.value = true
      return;
    }
    ElMessage.warning("没有拿到返回值，请检查接口！");
  } catch (error) {
    console.error(error);
    loading.value = false;
    ElMessage.warning("数据异常，请检查参数！");
  }
}
</script>
<style scoped lang="scss">
.ajax {
  padding-top: 10px;
  .conf-card {
    position: relative;
    .mark {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
      z-index: 1;
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid #0084fe;
      .btn {
        width: 100px;
        margin: 40% 0 0 50%;
        transform: translateX(-50%);
      }
    }
    &:hover {
      .mark {
        display: block;
      }
    }
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
    }
    .info {
      display: flex;
      flex-wrap: wrap;
      .i-item {
        width: 45%;
        margin: 0 10px 5px 0;
        .name {
          height: 28px;
          line-height: 28px;
          font-size: 14px;
          padding: 0 5px;
        }
        .value {
          height: 28px;
          line-height: 28px;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding: 0 5px;
        }
        .time {
          display: flex;
          justify-content: space-between;
          background: #d9d9d9;
          border: none;
        }
      }
    }
    .url {
      margin: 10px 0;
      .u-item {
        margin-bottom: 10px;
        display: flex;
        > div {
          height: 28px;
          line-height: 28px;
        }
        .name {
          width: 80px;
          text-align: right;
          padding-right: 5px;
        }
        .value {
          flex: 1;
          border-radius: 4px;
          background: #d9d9d9;
          padding: 0 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .test {
    display: flex;
    margin-bottom: 10px;
    > div {
      height: 28px;
      line-height: 28px;
    }
    .name {
      width: 80px;
      text-align: right;
      padding-right: 5px;
    }
    .value {
      flex: 1;
      border-radius: 4px;
      background: #d9d9d9;
      padding: 0 5px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
